import { Dialog, Steps } from 'antd-mobile'
import NavigateBar from '../../components/navigatebar/NavigateBar'
import style from './ReceptionAppStyle.module.sass'
import { Step } from 'antd-mobile/es/components/steps/step'
import { useEffect } from 'react'
import { MailOpenOutline } from 'antd-mobile-icons'
// import { useLocation } from 'react-router'
import ReceptionInfo from './components/info/ReceptionInfo'
import ReceptionPlan from './components/plan/ReceptionPlan'
import { useDispatch, useSelector } from 'react-redux'
import { setStep } from '../../store/ReceptionSlice'
import type { ReceptionSlice } from '../../type/ReceptionSlice'
import { useNavigate, useLocation } from 'react-router-dom'

/**
 * 接待申请页面
 * @returns
 * 需要传入一个state: {new:false} 否则刷新数据
 */

function ReceptionApp () {

  // #region 变量声明
  // const [ step, setStep ] = useState(0)
  const { step } = useSelector((state: { reception: ReceptionSlice }) => state.reception)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const location = useLocation()
  // #endregion

  // #region 函数
  function stepChange () {
    if (step) {
      dispatch(setStep(0))
      navigate('/reception/info', { state: { new: false } })
    } else {
      dispatch(setStep(1))
      navigate('/reception/plan', { state: { new: false } })
    }
  }
  function backClickHandler () {
    Dialog.confirm({
      title: '退出申请',
      content: '退出数据将不会保留, 确认退出吗?',
      closeOnMaskClick: true,
      onConfirm() {
        navigate('/')
      },
    })
  }
  // #endregion

  // #region Hooks
  useEffect(() => {
    // if (step) setStep(0)
    // navigate('/reception/info')
    if (location.state && location.state.new) {
      dispatch(setStep(0))
      navigate('/reception/info')
    }
    // eslint-disable-next-line
  }, [])
  // #endregion

  return (
    <div className={ style.reception }>
      <NavigateBar title='发起接待申请' hasBack={ true } backClick={ backClickHandler }/>
      <div className={ style.step_bar }>
        <Steps current={ step }>
          <Step title='接待信息' icon={ <div id='step_icon' className={ style.step_icon }>1</div> } />
          <Step title='行程安排' icon={ <div id='step_icon' className={ style.step_icon }>2</div> } />
        </Steps>
      </div>
      <div className={ style.reception_info }>
        { !step ? <ReceptionInfo /> : <ReceptionPlan /> }
      </div>
      <div className={ style.footer }>
        <div className={ style.save_draft }>
          <MailOpenOutline className={ style.save_draft_icon } />
          <em>存草稿</em>
        </div>
        <div className={ style.footer_btn } onClick={ stepChange }>{ !step ? '下一步' : '上一步' }</div>
        { Boolean(step) && <div className={ [style.footer_btn_finish, style.footer_btn].join(' ') }>提交</div> }
      </div>
    </div>
  )
}

export default ReceptionApp
